import React from 'react'
import { MediaBox, MediaBoxHeader, MediaBoxBody,Cell, CellBody, CellFooter } from 'react-weui'

export default class ShoppingCartItem extends React.Component {
	constructor(props) {
		super(props)
		this.state = {
			amount: this.props.num,
			deleted: false
		}
		this.handleDel = this.handleDel.bind(this)
	}

	handlePlusAmount() {
		var amount = this.state.amount;
		this.setState({
			amount: ++amount
		});
		this.props.shoppingCart.shoppingCartActions.changeGoodsNum(amount,this.props.cartId);
	}

	handleMinusAmount() {
		var amount = this.state.amount;
		if(amount > 1){
			this.setState({
				amount: --amount
			});
			this.props.shoppingCart.shoppingCartActions.changeGoodsNum(amount,this.props.cartId);
		}
	}

	handleDel() {
		this.props.shoppingCart.shoppingCartActions.deleteCartGoods(this.props.cartId);
	}

	// componentWillReceiveProps(nextProps) {
 //        if(nextProps.shoppingCart.shoppingCart.isDeleted == true && this.state.deleted == true ) {
	// 		this.setState({
	// 			visible:false
	// 		});
 //        }
 //    }
	render() {
		var { name, sizeId, colorId } = this.props;
		var title = name.split(' ')[0];
		var color = name.split(' ')[1];
		var size = name.split(' ')[2];
		return (
			<MediaBox type="appmsg" >
                <MediaBoxHeader><img src={'http://' + this.props.thumb} /></MediaBoxHeader>
                <MediaBoxBody>
  		            <Cell style={{ fontSize: '0.9em'}}>
                        <CellBody>
                            <p>{title}</p>
                            <small style={{ color: 'gray' }}>尺寸：{sizeId === null?'默认':size}&nbsp;&nbsp;&nbsp;&nbsp;颜色：{colorId===null?'默认':color}</small>
                            <div>
                                <span className="plus-minus-btn" onClick={this.handleMinusAmount.bind(this)}>-</span>
                                <span className="buy-amount">{this.props.num}</span>
                                <span className="plus-minus-btn" onClick={this.handlePlusAmount.bind(this)}>+</span>
                            </div>
                        </CellBody>
                        <CellFooter>
                            <p>{this.props.num*this.props.price}</p>
                            <i className="iconfont icon-close" style={{ fontSize: '1.4em' }} onClick={this.handleDel}></i>
                        </CellFooter>
                    </Cell>
                </MediaBoxBody>
            </MediaBox>
		);
	}
}
